<template>
  <div>
    <ImageUploader @file-selected="handleFileSelected" />
    <ResultDisplay :result="recognitionResult" />
    <FeedbackForm />
  </div>
</template>

<script>
import ImageUploader from '@/components/ImageUploader.vue';
import ResultDisplay from '@/components/ResultDisplay.vue';
import FeedbackForm from '@/components/FeedbackForm.vue';

export default {
  components: {
    ImageUploader,
    ResultDisplay,
    FeedbackForm
  },
  data() {
    return {
      recognitionResult: ''
    };
  },
  methods: {
    async handleFileSelected(formData) {
      try {
        const response = await fetch('http://127.0.0.1:5002/predict', {
          method: 'POST',
          body: formData // 确保这是 FormData 对象
        });

        if (!response.ok) {
          throw new Error('网络响应不正常');
        }

        const data = await response.json();
        this.recognitionResult = data; // 假设返回的结果是识别结果
        console.log(data);
      } catch (error) {
        console.error('图像识别失败:', error);
        this.recognitionResult = '识别失败，请重试。';
      }
    }
  }
};
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>